<div class="ui-g">
    <div class="ui-g-12 header">基础属性</div>
    <div class="ui-g-5 ui-widget-content">名称</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <p-dropdown [options]="nameItems" [(ngModel)]="assembly.name" [filter]="true" editable="true" [style]="{'width':'100%','height':'100%', 'border':'none', 'font-size':'16px'}">
        </p-dropdown>
    </div>
    <div class="ui-g-5 ui-widget-content">默认值</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <input type="text" [(ngModel)]="assembly.value" style="font-size: 12px;" />
    </div>
    <div class="ui-g-5 ui-widget-content">提示内容</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <input type="text" [(ngModel)]="assembly.configs.placeholder" style="font-size: 12px;" />
    </div>
    <div class="ui-g-12 header">样式属性</div>
    <div class="ui-g-5 ui-widget-content">宽度</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <input type="text" [(ngModel)]="assembly.attributes.width">
    </div>
    <div class="ui-g-5 ui-widget-content">高度</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <input type="text" [(ngModel)]="assembly.attributes.height">
    </div>
    <div class="ui-g-5 ui-widget-content">上边距</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <input type="text" [(ngModel)]="assembly.attributes.y" />
    </div>
    <div class="ui-g-5 ui-widget-content">左边距</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <input type="text" [(ngModel)]="assembly.attributes.x" />
    </div>
    <div class="ui-g-5 ui-widget-content">对齐</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <p-dropdown [options]="textAlign" [(ngModel)]="assembly.attributes.textAlign" [style]="{'width':'100%','height':'100%', 'border':'none', 'font-size':'16px'}">
        </p-dropdown>
    </div>
    <div class="ui-g-5 ui-widget-content">字体</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <p-dropdown [options]="fontFamily" [(ngModel)]="assembly.attributes.fontFamily" [style]="{'width':'100%','height':'100%', 'border':'none', 'font-size':'16px'}">
        </p-dropdown>
    </div>
    <div class="ui-g-12 header">校验属性</div>
    <div class="ui-g-5 ui-widget-content">是否必填</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <p-dropdown [options]="yesNo" [(ngModel)]="assembly.validators.required" [style]="{'width':'100%','height':'100%', 'border':'none', 'font-size':'16px'}">
        </p-dropdown>
    </div>
    <div class="ui-g-5 ui-widget-content">格式校验</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <p-dropdown [options]="patterns" [(ngModel)]="assembly.validators.pattern" [style]="{'width':'100%','height':'100%', 'border':'none', 'font-size':'16px'}">
        </p-dropdown>
    </div>
    <div class="ui-g-12 header">高级功能</div>
    <div class="ui-g-5 ui-widget-content">自动补全</div>
    <div class="ui-g-7 ui-widget-content ui-widget-content-input">
        <p-dropdown [options]="yesNo" [(ngModel)]="assembly.configs.autocomplete" [style]="{'width':'100%','height':'100%', 'border':'none', 'font-size':'16px'}">
        </p-dropdown>
    </div>
    <ng-container *ngIf="assembly.configs.autocomplete">
        <div class="ui-g-5 ui-widget-content">系统URL</div>
        <div class="ui-g-7 ui-widget-content ui-widget-content-input">
            <p-dropdown [options]="interface" [(ngModel)]="assembly.configs.completeURL" editable="true" placeholder="可自行填写" [style]="{'width':'100%','height':'100%', 'border':'none', 'font-size':'16px'}">
            </p-dropdown>
        </div>
        <div class="ui-g-5 ui-widget-content">补全SQL</div>
        <div class="ui-g-7 ui-widget-content ui-widget-content-input">
            <button type="button" class="ui-button-success button-small" pButton (click)="editContent()"
                icon="fa fa-edit"></button>
        </div>
    </ng-container>
</div>